<template>
    <section class="index-phone-center">
       <div>
          <h1>手机</h1>
          <section-box-recomend-common v-if="recommend !== null"
                                       :recommend="recommend"
          >
          </section-box-recomend-common>
          <!---->
          <section-box-common v-if="list !== null"
                              :data-list="list"
                              :style-string="style"
          >
          </section-box-common>
       </div>
    </section>
</template>

<script>
   import sectionBoxRecomendCommon from '../../components/section-box-recomend-common/section-box-recomend-common'
   import sectionBoxCommon from '../../components/section-box-common/section-box-common'
   export default {
      name: 'indexPhoneCenter',
      data() {
         return {
            recommend: null,
            list: null,
            style: `width:230px; height:230px;`
         }
      },
      created() {
         this._initData()
      },
      methods: {
         async _initData() {
            let data = await this.$axios.get('/apis/home/section_phone_box', {
               params: {
                  name: 'section_phone_box'
               }
            })
            if (data.data.code === 1) {
               this.recommend = data.data.result.dataUrl[0]
               this.list = data.data.result.dataUrl[1]
            }
         }
      },
      components: {
         sectionBoxRecomendCommon,
         sectionBoxCommon
      }
   }
</script>

<style scoped lang="stylus">
   .index-phone-center
      h1
         font-size 30px
         font-weight 400
</style>
